<template>
    <div>
      <antModel
        :GamebodyStyle="GamebodyStyle"
        :GameiconStyle="GameiconStyle"
        :gameName="gameName"
        :openGame="open"
        :GameheadStyle="GameheadStyle"
      >
        <template #content>
          <div class="gameBody">
            <div class="gameBody_header">
              <a-button type="primary" class="gameBody_header_button one"
                ><span class="text-style1 gameBody_header_title">SCORE</span>
                <i class="text-style1 gameBody_header_score">{{ score }}</i>
              </a-button>
              <a-button type="primary" class="gameBody_header_button two">
                <span class="text-style1 gameBody_header_title">BEST</span>
                <i class="text-style1 gameBody_header_score">{{
                  bestScore
                }}</i></a-button
              >
              <a-button
                type="primary"
                class="gameBody_header_button three"
                @click="reStart"
                >新开始</a-button
              >
            </div>
            <div class="gameBody_content">
          
            </div>
  
            <p>键盘上下左右(或w,a,s,d)按键，开始游戏</p>
          </div>
        </template>
      </antModel>
    </div>
  </template>
  <script setup>
  import antModel from "@/components/ant-component/ant-model/index.vue";
  import {
    h,
    ref,
    reactive,
    defineProps,
    onMounted,
    onUnmounted,
    watch,
  } from "vue";
  import Index from "../index.vue";
  import { resolveOnChange } from "ant-design-vue/es/vc-input/utils/commonUtils";
  import { debounce } from "lodash";

  const props = defineProps(["open"]);
  // 样式
  const GamebodyStyle = {
    height: "41.25rem",
    backgroundColor: "#faf8ef",
  };
  
  const GameheadStyle = {
    backgroundColor: "#a18b75",
  };
  const GameiconStyle =
    "z-index:999; margin-left:30px; width: 1.5rem; height: 1.5rem;color: #34c759;";
  
  const gameName = "2048";
  const Gameopen = ref(true);
  const start = { x: 0, y: 0 };
  watch(
    () => props.open,
    (val) => {
      window.addEventListener("keydown", handleKeyDown);
    }
  );
  onMounted(() => {
    // reStart();
    // ocument.addEventListener("keyup", this.keyDown);
  });
  onUnmounted(() => {
    window.removeEventListener("keydown", handleKeyDown);
  });

  </script>
  <style lang="scss" scoped>
  .gameBody {
    width: 50%;
    height: 100%;
    // width: 34.625rem;
    // height: 36.25rem;
    box-sizing: border-box;
    padding: 10px 0;
    .gameBody_header {
      display: flex;
      position: relative;
      .gameBody_header_button {
        display: flex;
        width: 6.25rem;
        height: 4.25rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #bbada0;
        border: 1px solid #bbada0;
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
        box-shadow: none;
        margin-right: 0.625rem;
        .gameBody_header_title {
          font-size: 1.125rem;
          font-weight: 700;
          color: #eee4da;
        }
      }
      .gameBody_header_button:last-child {
        position: absolute;
        right: 0%;
        margin-right: 0;
      }
      .three {
        width: 7.5rem;
        background-color: #8f7a66;
        border: 1px solid #8f7a66;
      }
    }
    .gameBody_content {
      width: 100%;
      height: 85%;
      margin-top: 0.3125rem;
      background-color: #bbada0;
      overflow: hidden;
      .gameBody_content-box {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        justify-content: space-between;
        padding: 4% 3% 0% 3%;
        overflow: hidden;
        z-index: 9999;
        .gameBody_content-box-item {
          display: flex;
          width: 22%;
          height: 21%;
          // width: 6.875rem;
          // height:  6.875rem;
          justify-content: center;
          align-items: center;
  
          border-radius: 0.3125rem;
          background-color: #cdc1b4;
          font-size: 2.1875rem;
          font-weight: 700;
          color: #fff;
          transition: all 3s;
        }
        .gameBody_content-box-item:nth-child(4n) {
          margin-right: 0;
        }
        .gameBody_content_cur {
          position: absolute;
  
          width: 22%;
          height: 21%;
          border-radius: 0.3125rem;
          font-size: 2.1875rem;
          font-weight: 700;
          // display: flex;
          // flex-wrap: wrap;
          background-color: #eee4da;
          // transform: translate(8.5rem, 8.125rem);
        }
      }
    }
  }
  .gameBody_content-box-trans {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    // z-index: 9999;
  }
  .render_common {
    text-align: center;
    position: absolute;
    color: "#333";
    font-size: 2.1875rem;
    font-weight: 700;
    border-radius: 0.3125rem;
    background-color: #eee4da;
    transition: transform 3s;
    transform: translate(0, 0);
  }
  .render_common:hover {
    // transform: translate(0, 100%);
  }
  @media (max-width: 780px) {
    .gameBody {
      width: 100%;
    }
  }
  </style>
  